<template>
<div class="designCloth">
     <div class="cloth_design" id="cloth_design">
         <div class="rotate" @click='rotateY'><img src="http://file.zoomyoung.cn/web/img/zhuan.png"/></div>
         <div class="next" @click="next">下一步</div>
         <transition name="rote">
           <div  id="cloth" class="zhuan">
             <div class="cloth" >
               <img  :src="face ==='0' ? cloth_src.front : cloth_src.after" id="pcloth" :face="face" :color='colorSpace'/>
             </div>
             <div class="pattern" >
               <div class="pattern_position">
                 <img :src="picture_src.material_up_src" class="pattern1" v-show='face ==="0" && picture_src.material_up_src !=""? true : false' />
                 <img :src="picture_src.material_down_src" class="pattern1" id="zhuan" v-show='face ==="0"? false : true'/>  
               </div>
             </div>
           </div>
         </transition>
         <div class="setColor">
           <div class="color_position">
              <img src="http://file.zoomyoung.cn/web/img/material/small/showBtn.png" class="colorBtn" @click="colorShow"/>
              <ul :class="colorBtn">
                <li v-for='(value,index) in colorBackground'>
                  <img :src="value.src" :color_space="value.color_space" @click='color_s($event)'/>
                </li>
                <li>
                  <img src="../assets/img/cloth/small/setBtn.png" @click="colorHide"/>
                </li>
              </ul>
           </div>
         </div>
         <div class="footerHeader">
       <ul>
         <li @click='selected("one")' :class="{select:nav.one.class1}">
           <img src="http://file.zoomyoung.cn/web/img/Chinese.png" v-show="!nav.one.one"/>
           <img src="http://file.zoomyoung.cn/web/img/Chinese1.png" v-show="nav.one.one"/>
         </li>
         <li @click='selected("three")' :class="{select:nav.three.class1}">
           <img src="http://file.zoomyoung.cn/web/img/picture.png" v-show="!nav.three.one"/>
           <img src="http://file.zoomyoung.cn/web/img/picture1.png" v-show="nav.three.one"/>
         </li>
         <li @click='selected("two")' :class="{select:nav.two.class1}">
           <img src="http://file.zoomyoung.cn/web/img/English.png" v-show="!nav.two.one"/>
           <img src="http://file.zoomyoung.cn/web/img/English1.png" v-show="nav.two.one"/>
         </li>
       </ul>
     </div>
     </div>
     <footer1></footer1>
</div>
</template>
<script>
import footer1 from './compon/designFooter.vue'
export default {
  name: 'designCloth',
  data () {
    return {
      colorBtn:{select:false,unselect:false},    //设置setcolorBtn的class  用来实现动画效果
      colorBackground:[],
      deg:0,             //旋转的角度
      data:{
        before:{
          gid:'1',
          color:'ffffff',
          frontImg:'',
          afterImg:''
        },
        after:{
          gid:'1',
          color:'ffffff',
          frontImg:'',
          afterImg:''
        }
      },
      nav:{
        one:{one:true,class1:true},
        two:{one:false,class1:false},
        three:{one:false,class1:false}
       },
       face:'0',
       cloth_src:{
        front:'http://file.zoomyoung.cn/main/2018/6/9/9b254b6cbb190b9c4d419f223ad56563.png',
        after:'http://file.zoomyoung.cn/main/2018/6/9/563467abed7e05edeadc1b7883710f09.png'
      },
      colorSpace:'ffffff',
      code:"",
    }
  },
  watch:{
    picture_src(a,b){
      console.log(a)
         console.log(b)
    }
  },
  computed:{
    picture_src(){
      return this.$store.state.picture_src;
    }
  },
  mounted(){
    this.$store.dispatch('setFace',this.face)
    var _this=this;
    var $cloth_design=document.getElementById('cloth_design');
    var $cloth_select=document.getElementById('cloth_select');
    var $cloth=document.getElementById('cloth');
    var $pattern=document.getElementById('pattern');
    /*把页面分为两个部分，底部是固定，之后把剩下的高度都给展示这个框*/
    var $select_height=$cloth_select.offsetHeight;
    var $window_height=document.body.clientHeight&&document.documentElement.clientHeight;
    $cloth_design.style.height=$window_height-$select_height+"px";
     /*设置旋转的衣服和图案的位置*/
    $cloth.style.top= ($cloth_design.offsetHeight-$cloth.offsetHeight)/2+"px";
    //获取颜色小图片，当点击的时候更换衣服的颜色
     this.$http.get('http://zoomyoung.cn/api/design/get-color-list').then(function(res){  
     for(var i=0;i<res.data.data.length;i++)
     {
      _this.colorBackground.push({'src':res.data.data[i].color_img_url,'color_space':res.data.data[i].color_space})
     }
      }).catch(function(err){  
      console.log(err)  
      }) 
    },
  methods:{
    colorShow(){     //点击colorBtn按钮，显示color条
     this.colorBtn.select=true;
     this.colorBtn.unselect=false;
    },
    colorHide(){    //点击收起按钮，隐藏color条
      this.colorBtn.select=false;
     this.colorBtn.unselect=true;
    },
    rotateY(){     //点击的时候衣服旋转
      var _this=this;
      if(_this.face==='0')
      {
        _this.face='1'
        _this.$store.dispatch('setFace',this.face)
      }
      else
      {
        _this.face='0'
        _this.$store.dispatch('setFace',_this.face)
      }
     
    //点击旋转按钮，更换相反面的衣服颜色
    this.$http.get('http://zoomyoung.cn/api/design/get-template',{params:{
        gid:'1',face:_this.face,color:_this.colorSpace
     }}).then(function(res){ 
     if(res.data.data.face==='0')
        { 
          _this.cloth_src.front=res.data.data.img_url;
        }
      else
      {
        _this.cloth_src.after=res.data.data.img_url;
      }
      var zhuan=document.getElementById('cloth');
      var pcloth=document.getElementById('pcloth');
      var pattern=document.getElementById('pattern');
      var patternImg=document.getElementById('zhuan');
      patternImg.style.transform="rotateY(180deg)"
      var time=setInterval(function(){
        _this.deg+=5;
        zhuan.style.transform="rotateY("+_this.deg+"deg)";
        if(_this.deg==90)
        {
         pcloth.src=_this.cloth_src.after;
        };
        if(_this.deg==270)
        {
         pcloth.src=_this.cloth_src.front;
        }
        if(_this.deg==180||_this.deg>=360)
        {
          clearInterval(time);
          if(_this.deg>=360)
          {
            _this.deg=0;
          }
        }
      },20)
      }).catch(function(err){  
      console.log(err)  
      }) 
    },
    selected(value){
      
     for(var i in this.nav)
     {
      this.nav[i].one=false;
      this.nav[i].class1=false;
     }
     this.nav[value].one=true;
     this.nav[value].class1=true;
     var type="";
       if(value=='one')
       {
        type="zh"
       }
       if(value=='two')
       {
       type="en"
      } 
      if(value=='three')
      {
        type='img'
      };
       this.$store.dispatch('setSmallImg',type)
    },
    color_s(ev){
      var _this=this;
     
     //点击衣服小图标  更换衣服颜色    
     this.$http.get('http://zoomyoung.cn/api/design/get-template',{params:{
        gid:'1',face:_this.face,color:ev.currentTarget.getAttribute('color_space')
     }}).then(function(res){  
        if(res.data.data.face==='0')
        {
          _this.cloth_src.front=res.data.data.img_url;
          _this.colorSpace=res.data.data.color_space;
        }
        else
        {
          _this.cloth_src.after=res.data.data.img_url;
          _this.colorSpace=res.data.data.color_space;
        }  
      }).catch(function(err){  
      console.log(err)  
      }) 
    },
    next(){
      this.bus.$emit('loading', true);    //把加载层开启
      console.log(this.picture_src)
      var _this=this; 
      this.$http.post('http://zoomyoung.cn/api/design/build-new',{
      gid:'1',color:_this.colorSpace,material_up_id:_this.picture_src.material_up_id,material_down_id:_this.picture_src.material_down_id,
   },{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
        _this.bus.$emit('loading', false);     //把加载层关闭
        _this.code=res.data.data;
        _this.$router.push({name:"show",query:{code:_this.code}});    //把code的参数传递下去  可以代替路由router-link的作用，这里不采用router-link跳转是因为如果采用router-link的化  会还没执行这个post请求，页面就会发生了跳转；
      }).catch(function(err){  
      console.log(err)  
      }) 
    },
  },
  components:{footer1}
}
</script>


<style scoped>
body,html{height: 100%;}
    .designCloth{width: 100%;overflow: hidden;height: }
    .cloth_design{width: 100%;height: 100%;background-image: url('http://file.zoomyoung.cn/web/img/background01.png');position: relative;background-size: 100%;background-repeat: no-repeat;position: fixed;left: 0;top: 0;}
    .cloth_select{width: 100%;height: 500px;position: fixed;left: 0;bottom: 0;}
    .rotate{width: 13.4%;position: absolute;left: 0;top: 0;z-index: 99}
    .rotate img{width: 100%;}
    .next{width: 20%;height: 64px;background-image: linear-gradient(90deg, #E716C4 0%, #7403FF 100%);border-radius: 10px;font-family: PingFangSC-Semibold;font-size: 36px;color: #FFFFFF;letter-spacing: -0.23px;line-height: 64px;position: absolute;right: 2.7%;top: 30px;text-align: center;z-index: 99}
    .zhuan{width: 68.7%;position: absolute;left: 15.65%;}
    .cloth{width: 100%;height: 640px;}
    .cloth img{width: 100%;}
    .pattern{width: 37.3%;height: 450px;position: absolute;left: 31.3%;top: 122px}
    .pattern img{width: 100%;}
    .pattern_position{width: 100%;height: 100%;position: relative;}
    .pattern1{width: 100%;position: absolute;left: 0;top: 0}
    .setColor{width: 16%;position: absolute;right: 0;bottom: 100px;height: 600px;padding-top: 20px;z-index: 100}
    .color_position{width: 100%;height: 100%;position: relative;}
    .setColor img.colorBtn{width: 100%;position: absolute;left: 0;bottom: 0;display: -none}

    .color_position ul{width:100%;height:0;position: absolute;left: 0;bottom: 0;background-image: url('http://file.zoomyoung.cn/web/img/material/small/bottom.png');background-size: 100%;overflow-y: hidden;}
    .color_position ul.select{animation: show 1s;height: 100%;}
    .color_position ul.unselect{animation: hide 1s;height: 0%;}
    @keyframes show{
    0%{height:0%;}
    100%{height: 100%}
    }
    @keyframes hide{
    0%{height:100%;}
    100%{height: 0%}
    }
    .color_position ul li{width: 100%;margin-top: -3px}
    .color_position ul li:nth-of-type(1){margin-top: 15px}
    .color_position ul li img{width: 100%;}

    .footerHeader{width: 100%;height: 100px;position: absolute;left: 0;bottom: 0;background: rgba(0,0,0,0.4);}
    .footerHeader ul{width: 100%;height: 100%;display: flex;box-sizing:border-box;}
    .footerHeader ul li{width: 100%;height: 100%;position: relative;}
    .footerHeader ul li.select{background: #000000}
    .footerHeader ul li img{height: 80%;position: absolute;top: 10%;left: 38%;}
</style>